<template>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<el-button type="primary" plain @click="showDialog('column')" class="el-icon-plus" size="small">添加字段</el-button>
			<div style="color: red;font-size: small;margin-top: 10px;">说明：双击修改(TDengine目前对超表的修改仅支持修改nchar与binary类型列宽)</div>
		</div>
		<el-table :data="tableData" border style="width: 100%" :highlight-current-row="true" @cell-dblclick="onCelldbClick" :row-class-name="tableRowClassName">
			<el-table-column prop="name" label="名称">
				<template slot-scope="scope">
					<el-input v-if="scope.row.nameEdit" size="small" v-model="scope.row.name">
						 <el-button slot="append" icon="el-icon-check" @click="modifyCell('name',scope.row)"></el-button>
						 <el-button slot="append" icon="el-icon-close" @click="canModifyCell('name',scope.row)"></el-button>
					</el-input>
				  <span v-if="!scope.row.nameEdit">{{scope.row.name}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="dbType" label="类型" width="120"></el-table-column>
			<el-table-column prop="dblength" label="长度" width="180">
				<template slot-scope="scope">
					<el-input v-if="scope.row.dblengthEdit" size="small" v-model="scope.row.dblength">
						 <el-button slot="append" icon="el-icon-check" @click="modifyCell('dblength',scope.row)"></el-button>
						 <el-button slot="append" icon="el-icon-close" @click="canModifyCell('dblength',scope.row)"></el-button>
					</el-input>
					<span v-if="!scope.row.dblengthEdit">{{scope.row.dblength}}</span>
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="60">
				<template slot-scope="scope">
					<el-button @click="del(scope.row)" type="text" size="small" v-if="scope.row.id!=1">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog :close-on-click-modal="false" :before-close="cancelAdd" :visible.sync="addDialog" :title="title">
			<el-form :model="tableForm" ref="tableForm" :rules="stableRules" label-width="80px">
				<el-form-item label="名称" prop="name">
					<el-input v-model="tableForm.name" maxlength="150"></el-input>
				</el-form-item>
				<el-col :span="12">
					<el-form-item label="类型" prop="type">
						<el-select v-model="tableForm.type" placeholder="请选择" @change="typeChange" :disabled="selectDisabled">
							<el-option v-for="item in typeOptions" :key="item.value" :label="item.value" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="长度" prop="dblength">
						<el-input v-model="tableForm.dblength" :disabled="lenDisabled"></el-input>
					</el-form-item>
				</el-col>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancelAdd" size="medium">取 消</el-button>
				<el-button type="primary" @click="confirmAdd('tableForm')" size="medium">确 定</el-button>
			</div>
		</el-dialog>

	</el-card>
</template>

<script>
	import taos from '../../api/taosrestful'
	import {mapGetters} from 'vuex'
	export default {
		name:"table_edit",
		data() {
			return {
				payload: null,
				title: '添加字段',
				addDialog: false,
				tableForm: {'id':'','name':'','dblength':0},
				tableData: [],
				lenDisabled: false,
				selectDisabled: false,
				typeOptions: [
					{value:'TIMESTAMP',len:8},{value:'INT',len: 4},{value:'BIGINT',len: 8 },{ value:'FLOAT',len: 4 },{value:'DOUBLE',len: 8 },
					{ value:'SMALLINT',len: 2 },{ value:'TINYINT',len: 1 },{ value:'BOOL',len: 1 },{ value:'NCHAR',len: 0 },{ value:'BINARY',len: 0 }
				],
				stableRules:{
					name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
					type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
					dblength: [{ required: true, message: '请输入长度', trigger: 'blur' }],				
				},
				editType: false,
				tableName: null,
				currentRowIndex:0
			};
		},
		computed: {
			...mapGetters(['curObject'])
		},
		created() {
			this.init()
		},
		props: {
		    objId:''
		},
		methods: {
			init(){
				let tmpTable = JSON.parse(localStorage.getItem(this.objId))
				if(!tmpTable){
					this.$message({message: '请输入表的表名',type: 'error',duration: 1000})
					return
				}
				let link = this.curObject.link
				this.payload = {ip: link.host,port: link.port,user: link.user,password: link.password}
				this.tableName = tmpTable.name
				taos.describeTable(this.curObject.dbName,this.tableName,this.payload).then(data => {
					if (data.res) {
						for(var i=0;i<data.data.length;i++){
							let tmp = data.data[i]
							if(data.version=='2.x'){
								this.tableData.push({'id':i===0?1:(new Date().getTime()+i),'name':tmp.Field,'nameEdit':false,'dbType':tmp.Type,'dblength':tmp.Length,'dblengthEdit':false})
							}else{
								this.tableData.push({'id':i===0?1:(new Date().getTime()+i),'name':tmp.field,'nameEdit':false,'dbType':tmp.type,'dblength':tmp.length,'dblengthEdit':false})
							}
							
						}
					}else{
						this.$message({message: data.msg,type: 'error',duration: 1000})
					}
				})
			},
			tableRowClassName({row, rowIndex}) {
				row.row_index = rowIndex;
			},
			onRowClick(row, column, event){
				this.currentRowIndex = row.row_index;
			},
			onCelldbClick(row, column, cell, event){
				if(row.dbType=='NCHAR' || row.dbType=='BINARY'){//列只能修改长度，且只能改大
					if(column.property =='dblength'){
						row.dblengthEdit = true
						row.olderlen = row.dblength
					}
				}
			},
			canModifyCell(type,row){
				row.dblengthEdit = false
				row.dblength = row.olderlen
			},
			modifyCell(type,row){
				//修改列的长度
				if(row.dblength<row.olderlen){
					this.$message({message: '长度只能改大不改小',type: 'error',duration: 1000})
					return
				}
				let dbType = row.dbType
				if(dbType==='NCHAR' || dbType==='BINARY'){
					dbType = dbType+' ('+row.dblength+')'
				}
				let columnStr = row.name +' '+ dbType
				taos.modifyTableColumn(this.curObject.dbName,this.tableName,columnStr,this.payload).then(data => {
					if (data.res) {
						row.dblengthEdit = false
					}else{
						row.dblength = row.olderlen
						this.$message({message: data.msg,type: 'error',duration: 1000})
					}
				})
			},
			cancelAdd() {
				this.addDialog = false
				this.lenDisabled = false
				this.selectDisabled = false
			},
			showDialog(type) {
				this.addDialog = true
				this.lenDisabled = false
				this.selectDisabled = false
				this.editType = false
				this.title = '添加字段'
				this.tableForm = {'id':'','name':'','dblength':0,}
			},
			typeChange(v){
				for(var i=0;i<this.typeOptions.length;i++){
					let option = this.typeOptions[i]
					if(v===option.value){
						if(option.len===0){
							this.tableForm.dblength = 20
							this.lenDisabled = false
						}else{
							this.tableForm.dblength = option.len
							this.lenDisabled = true
						}
					}
				}
			},
			confirmAdd(fromName) {
				this.$refs['tableForm'].validate((valid) => {
				if (valid) {
					//判断重复
					for (var i = 0;i < this.tableData.length; i++){
						if (this.tableData[i].name===this.tableForm.name){
							this.$message({message: '【'+this.tableForm.name+'】已存在',type: 'error',duration: 1000})
							return
						}
					}
					this.addTableColumn()
					this.addDialog = false
					this.currentRowIndex = 0
				}
				});
			},
			//添加一列
			addTableColumn(){
				let dbType = this.tableForm.type
				if(dbType==='NCHAR' || dbType==='BINARY'){
					dbType = dbType+'('+this.tableForm.dblength+')'
				}
				let columnStr = this.tableForm.name +' '+ dbType
				taos.addTableColumn(this.curObject.dbName,this.tableName,columnStr,this.payload).then(data => {
					if (data.res) {
						this.tableData.push({'id':new Date().getTime(),'name':this.tableForm.name,'dbType':this.tableForm.type,'dblength':this.tableForm.dblength,'dblengthEdit':false})
					}else{
						this.$message({message: data.msg,type: 'error',duration: 1000})
					}
				})
			},
			del(row){
				taos.dropTableColumn(this.curObject.dbName,this.tableName,row.name,this.payload).then(data => {
					if (data.res) {
						for (var i = 0;i < this.tableData.length; i++){
						   if (this.tableData[i].id===row.id){
						       this.tableData.splice(i,1);
						   }
						}
						this.$message({message: '操作成功',type: 'success',duration: 1000})
					}else{
						this.$message({message: data.msg,type: 'error',duration: 1000})
					}
				})
			}
		}
	};
</script>

<style>
</style>